<template>
    <div class="addTeacher">
        <div>
        <el-form :model="teacherForm"  ref="ruleForm" label-width="120px">
            <el-form-item label="姓名" prop="name">
                <el-col :span="6">
                    <el-input v-model="teacherForm.teachername" placeholder="请输入姓名"></el-input>
                </el-col>
                <el-col :span="14">
                    <el-form-item v-show="operateType === 'edit'" label="图片展示：" prop="region" class="msTop">
                        <img class="imgSize" :src="teacherForm.picture">
                    </el-form-item>
                    <el-form-item :label="operateType === 'edit' ? '修改图片：': '上传图片'" class="msTop">
                        <el-upload
                                class="upload-demo"
                                action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
                                ref="newsUpload"
                                :on-change="handleFileChange"
                                :file-list="teacherFileList"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
                            <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="职位" prop="region">
                <el-col :span="8">
                    <el-input v-model="teacherForm.role" placeholder="请输入职位"></el-input>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="头衔" prop="region">
                        <el-input v-model="teacherForm.position" placeholder="请输入头衔"></el-input>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="地址" prop="region">
                <el-col :span="20">
                    <el-input v-model="teacherForm.address" placeholder="请输入地址"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="联系方式" prop="region">
                <el-col :span="20">
                    <el-input v-model="teacherForm.contact" placeholder="请输入联系方式"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="研究兴趣" prop="region">
                <el-col :span="20">
                     <el-input type="textarea" placeholder="请输入内容" v-model="teacherForm.interest"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="工作经历" prop="name">
                <el-col :span="20">
                    <el-input v-model="teacherForm.biography" placeholder="请输入内容"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="教育经历" v-show="operateType === 'edit'" prop="name">
                <el-col :span="18">
                    <div v-show="teacherForm.educations != null" v-for="(item,index) in teacherForm.educations" :key="index">
                        <span>{{index+1}}、{{item.year}}——{{item.degree}}——{{item.school}} </span>
                        <el-button slot="append" @click="toDeleteEducation(item.id)">删除</el-button>
                    </div>
                    <div v-show="teacherForm.educations && teacherForm.educations.length === 0">
                        <span>暂未添加教育经历</span>
                    </div>
<!--                  <div v-show="!teacherForm.educations">-->
<!--                    <span>暂未添加教育经历</span>-->
<!--                  </div>-->
                </el-col>
            </el-form-item>
            <el-form-item label="获奖经历" v-show="operateType === 'edit'" prop="name">
                <el-col :span="18">
                    <div v-show="teacherForm.awards != null" v-for="(item,index) in teacherForm.awards" :key="index">
                        {{index+1}}、{{item.year}}——{{item.award}}
                        <el-button @click="toDeleteAward(item.id)">删除</el-button>
                    </div>
                    <div v-show="teacherForm.awards && teacherForm.awards.length === 0">
                        <span>暂未添加获奖经历</span>
                    </div>
                </el-col>
            </el-form-item>
            <el-form-item label="发表文章" v-show="operateType === 'edit'" prop="name">
                <el-col :span="18">
                    <div v-show="teacherForm.articles != null" type="textarea" v-for="(item,index) in teacherForm.articles" :key="index">
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item :title="change(index)" :name="index+1">
                                <div>
                                    <el-form label-width="90px">
                                    <el-form-item label="图片："><img class="imgSize" :src="item.picture"></el-form-item>
                                    <el-form-item label="文章：">{{item.title}}</el-form-item>
                                    <el-form-item label="作者：">{{item.author}}</el-form-item>
                                    <el-form-item label="出版社：">{{item.journalname}}</el-form-item>
                                    <el-form-item label="DOI：">{{item.doi}}</el-form-item>
                                    <el-form-item label="出版时间：">{{item.publishdate}}</el-form-item>
                                    <el-form-item label="概要：">{{item.summary}}</el-form-item>
                                    <el-form-item>
                                        <el-button @click="toDeleteArticle(item.id)">删除</el-button>
                                    </el-form-item>
                                    </el-form>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <div v-show="teacherForm.articles && teacherForm.articles.length === 0">
                        <span>暂未添加文章</span>
                    </div>
                </el-col>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="teacherForm.flag">
                    <el-radio :label="'0'" selected>是</el-radio>
                    <el-radio :label="'1'">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSubmit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
        </div>

    </div>
</template>

<script>//addTeacherAward,
    import { updateTeacher,addTeacher,uploadFile,deleteTeacherEducation,deleteTeacherArticle,deleteTeacherAward } from '@/api/memberManage'
    export default {
        name: "AddTeacher",
        props: {
            operateType: {
                type: String,
                default: () => 'add'
            },
            teacherInfo: {
                type: Object,
                default: () => {
                    return {
                            teacherid: '',
                            teachername: '',
                            address: '',
                            contact: '',
                            role: '',
                            position: '',
                            pricture: '',
                            biography: '',
                            nterest: '',
                            flag: '',
                            educations:[],
                            awards: [],
                            articles: [],
                    }
                }
            }
        },
        watch: {
            teacherInfo: {
                handler(newVal, objVal) {
                    if(newVal !== objVal){
                        this.teacherForm = newVal
                    }
                },
            }
        },
        data() {
            return {
                loading: false,
                fileLoading: false,
                successImagUrl: '',
                teacherFileList: [],
                teacherForm: this.teacherInfo,
                activeNames: ['1'],
            }
        },
        methods:{
            change(index){
                return (index+1).toString()
            },
            handleChange(val) {
                console.log(val);
            },
            async deleteEducation(id){
                try{
                    const res = await deleteTeacherEducation({id: id})
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '成功'
                    })
                    this.$emit('updateTable')
                } catch (e) {
                    console.log(new Error(e))

                }
            },
            toDeleteEducation(id){
                const _this = this
                this.$alert('确定删除吗', '警告', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        if(action === 'confirm'){
                            _this.deleteEducation(id)
                        }
                    }
                });
            },
            async deleteArticle(id){
                try{
                    const res = await deleteTeacherArticle({id: id})
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '成功'
                    })
                    this.$emit('updateTable')
                } catch (e) {
                    console.log(new Error(e))
                }
            },
            toDeleteArticle(id){
                const _this = this
                this.$alert('确定删除吗', '警告', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        console.log(action)
                        if(action === 'confirm'){
                            _this.deleteArticle(id)
                        }
                    }
                });
            },
            async deleteAward(id){
                try{
                    const res = await deleteTeacherAward({id: id})
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '成功'
                    })
                    this.$emit('updateTable')
                } catch (e) {
                    console.log(new Error(e))
                }
            },
            toDeleteAward(id){
                const _this = this
                this.$alert('确定删除吗', '警告', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        console.log(action)
                        if(action === 'confirm'){
                            _this.deleteAward(id)
                        }
                    }
                });
            },
            async addSubmit(){
                if(this.operateType === 'add'){
                    try {
                        this.teacherForm.picture = this.successImagUrl
                        this.loading = true
                        await addTeacher(this.teacherForm)
                        this.$message({
                            type: 'success',
                            message: '成功'
                        })
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log( new Error(e))
                    }
                    this.loading = false
                } else {
                    try {
                        this.teacherForm.picture = this.successImagUrl ? this.successImagUrl : this.teacherInfo.picture
                        /*this.teacherForm.teacherid = this.teacherInfo.teacherid*/
                        this.loading = true
                        await updateTeacher(this.teacherForm)
                        this.$message({
                            type: 'success',
                            message: '成功'
                        })
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log( new Error(e))
                    }
                    this.loading = false
                }
            },
            handleFileChange(file, FileList){
                this.teacherFileList = FileList
            },
            async submitUpload(){
                let formData = new FormData()
                formData.append('file', this.teacherFileList[0].raw)
                // this.newsFileList.forEach(function (file) {
                //   formData.append("file", file.raw, file.name);
                // })
                this.fileLoading = true
                const res = await uploadFile(formData)
                this.successImagUrl = res.message
                this.$message({
                    type: 'success',
                    message: '上传成功'
                })
                this.fileLoading = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .addTeacher{
        .msTop{
            .imgSize{
                width: 50px;
                height: 50px;
            }
        }
        /deep/ .el-form-item {
            margin-bottom: 15px;
        }
        /deep/ .el-form-item__label {
            font-size: 14px;
        }
        /deep/ .el-input__inner, .el-textarea__inner, .textarea__inner {
            font-size: 12px;
        }
        .upload, .submit{
            font-size: 16px;
            background: #cccccc;
            height: 35px;
            width: 70px;
        }
        .upload{
            color: #D0021B;
        }
        .submit{
            color: #3D434F;
        }
        /deep/ .el-button--medium {
            font-size: 12px;
            /*margin-left: 10px;*/
        }

    }

</style>
